<template>
  <div>
    <el-dialog
      title="分配角色"
      :visible="dialogJuese"
      @close="closeFn"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
          @change="changeFn"
        >{{ item.title }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="confirmFn">确 定</el-button>
          <el-button size="small" @click="closeFn">取 消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList } from '@/api/roleAdmin'
import { PjPage } from '@/api/staff'

export default {
  props: {
    dialogJuese: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      checkList: [],
      roleList: [], // 角色列表
      userId: 0
    }
  },
  async created() {
    const res = await getRoleList()
    // console.log(38, res)
    this.roleList = res.data
  },
  methods: {
    // // 修改了多选框就会触发的事件
    changeFn() {
      // this.checkList
    },
    // 确定按钮
    async confirmFn() {
      await PjPage({ id: this.userId, roles: this.checkList })
      // console.log(this.checkList)
      this.closeFn()
    },
    // 取消按钮
    closeFn() {
      this.checkList = [] // 清空选中的角色
      this.$emit('update:dialogJuese', false)
    }
  }
}
</script>
<style scoped>
</style>
